 <template>
  <section class="homepage-supplier">
    <div class="section-header">
      <div class="section-title">
        推荐供应商
      </div>

    </div>
    <div class="section-content">
      <div class="supplier-row">
        <div v-for="n in 6" :key="n" class="supplier-item">
          <img v-if="list[n-1]" class="supplier-image" :src="list[n-1].image" @click="goToView(n-1)">
        </div>
      </div>
      <div class="supplier-line"></div>
      <div class="supplier-row">
        <div v-for="n in 6" :key="n" class="supplier-item" @click="goToView(n)">
          <img v-if="list[n+5]" class="supplier-image" :src="list[n_+5].image">
        </div>
     </div>

    </div>
  </section>
</template>
<script>
import HomepageAPI from '@/api/homepage/homepage';
export default {
    data() {
        return {
            list: [
            ]
        };
    },
    mounted() {
        this.getArticles();
    },
    methods: {
        getArticles() {
            HomepageAPI.getSupplier()
                .then(res => {
                    this.list = res.obj;
                });
        },
        goToView(index) {
            this.$router.push('/f/supplier/' + this.list[index].id);
        }
    }
};
</script>

<style lang="scss">
  @import "../../../assets/front/front";

  .homepage-supplier {
    .section-header {
      padding-left: 5px;
      height: 60px;
      display: flex;
      align-items: center;
      .section-title {
        font-size: 22px;
      }
    }
    .section-content {
      height:145px;
      border: solid 1px #e6e6e6;
      background-color: white;
      .supplier-row {
        display: flex;
      }
      .supplier-line {
        height:1px;
        background: $bg-color;
      }
      .supplier-item {
        padding:10px 0;
        width:200px;
        height:72px;
        &+.supplier-item {
          .supplier-image {
            border-left: 1px solid $bg-color;
          }
        }
        .supplier-image {
          padding:0 10px;
          width:100%;
          height:100%;
        }
      }
    }

  }


</style>
